/*
 * @Author: wangtao
 * @Date: 2020-06-28 15:43:56
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-08-10 18:20:15
 * @Description: 货车详情
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';
import {
  fontColorBlack,
  px2dp,
  fontColorSecDeepGray,
} from '@/styles';
import { Button, msg, _, XMImage } from '@/common';
import {
  iconRightGray,
} from '@/images';
import CarImgPreview from './car-img-preview';

const { Submit } = Button;

export default class CarImg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewUrl: '',
      previewModalShow: false
    };
  }

  componentDidMount() {}

  render() {
    const { goodsSubgraphCateVO, onChangeCate, id, activeKey } = this.props;
    const { name, goodsSubgraphVOS } = goodsSubgraphCateVO;
    const { previewModalShow, previewUrl } = this.state;
    let goodsSubgraphVOSToSix = goodsSubgraphVOS.slice(0, 6);
    return (
      <View style={styles.listItem}>
        <View style={styles.listHeader}>
          <Text style={styles.listTitle}>
            {name}
            {' '}
&nbsp;
            <Text style={styles.listNum}>
              {goodsSubgraphVOS.length}
              张
            </Text>
          </Text>
          {goodsSubgraphVOS.length > 6 && activeKey === 0 && (
            <TouchableOpacity activeOpacity={0.8} onPress={() => { onChangeCate(id); }}>
              <Text style={styles.more}>
                更多
                <Image
                  style={{ width: px2dp(24), height: px2dp(24) }}
                  resizeMode='stretch'
                  source={iconRightGray}
                />
              </Text>
            </TouchableOpacity>
          )}
        </View>
        <View style={styles.imgList}>
          {(goodsSubgraphVOS.length > 6 && activeKey === 0 ? goodsSubgraphVOSToSix : goodsSubgraphVOS).map((item) => {
            return (
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => {
                  this.onChangeModal({ type: 'previewModalShow', val: true, previewUrl: item.picFileId });
                }}
                style={styles.imgItem}
                key={item.id}
              >
                <XMImage source={{ uri: `${item.picFileId}?x-oss-process=image/resize,m_lfit,h_160,w_200` }} />
              </TouchableOpacity>
            );
          })}
          <TouchableOpacity
            activeOpacity={0.8}
            onPress={() => {}}
            style={styles.imgNull}
          />
        </View>
        {previewModalShow && <CarImgPreview previewUrl={previewUrl} onChangeModal={(obj) => this.onChangeModal(obj)} />}
      </View>
    );
  }

  onChangeModal=({ type, val, previewUrl }) => {
    this.setState({ [type]: val });
    this.setState({ previewUrl });
  }
}
const styles = StyleSheet.create({
  listItem: {
    marginTop: px2dp(40),
  },
  listHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  listTitle: {
    fontSize: px2dp(32),
    fontWeight: 'bold',
    color: fontColorBlack,
  },
  listNum: {
    fontSize: px2dp(28),
    fontWeight: 'normal',
    color: fontColorSecDeepGray,
    marginLeft: px2dp(16),
  },
  more: {
    fontSize: px2dp(28),
    fontWeight: 'normal',
    color: fontColorSecDeepGray,
  },
  imgList: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  imgItem: {
    width: px2dp(214),
    height: px2dp(160),
    marginTop: px2dp(24),
    borderRadius: px2dp(8),
    overflow: 'hidden'
  },
  imgNull: {
    width: px2dp(214),
    height: 0,
    marginTop: px2dp(24),
  },
});
